<template>
	<view class="body">
		<!-- 自定义导航栏 -->
		<view>
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar title="购物车" @rightClick="rightClick" :autoBack="true" :placeholder="true">
			</u-navbar>
		</view>

		<view class="top">
			<view>全部(20)</view>
			<view>降价(4)</view>
			<view>常卖(2)</view>
			<view>分类</view>
		</view>

		<view class="wrap">
			<view style="display: flex;">
				<checkbox value="" />
				<view class="">
					小U自营
				</view>
			</view>
			<view style="padding: 0 40rpx 0 0;">
				以免运费 ｜ <text style="color: red;">领劵</text>
			</view>
		</view>

		<!-- 商品 -->
		<view class="product" v-for="(item,index) in cartList" :key="item.id">
			<view class="checkbox">
				<checkbox-group @change="b($event,item.id)">
					<checkbox :checked="item.status == 1 ? !!item.status : false" value="" />
				</checkbox-group>
			</view>
			<image :src="item.img" mode=""></image>
			<view class="text">
				<view class="title">{{item.goodsname}}</view>
				<view>规格:不错的商品</view>
				<view style="color: red;">比加入降低¥100</view>
				<view style="color: red;">
					¥{{item.price}}
					<del style="color: #ccc;">¥3999</del>
				</view>
			</view>
			<view class="btn">
				<button @click="des(item.id,index)">-</button>
				<view>
					{{item.num}}
				</view>
				<button @click="add(item.id,index)">+</button>
			</view>
			<button class="button" @click="del(index)">删除</button>
		</view>

		<!-- 暂无商品 -->
		<view class="" v-if="!cartList">
			<view>暂无商品</view>
			<button @click="goIndex">去选购</button>
		</view>

		<!-- 购物车下面结算 -->
		<view class="bot">
			<view class="">
				<checkbox-group @change="a">
					<checkbox :checked="allCheckbox" value="11" /><text>全选</text>
				</checkbox-group>
			</view>
			<view class="">
				<text>合计: ¥ {{totalPrice}}</text>
			</view>
			<view class="close" @click="goOrder">去结算({{totalNum}})</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cartList: []
			}
		},
		methods: {
			rightClick() {
				console.log('rightClick');
			},
			leftClick() {
				console.log('leftClick');
			},
			// 全选
			a(e) {
				console.log(e.detail.value);
				if (e.detail.value.length > 0) {
					this.cartList.forEach(v => v.status = true)
				} else {
					this.cartList.forEach(v => v.status = false)
				}
			},
			// 单选
			b(e, id) {
				let c = true
				c = e.detail.value.length > 0 ? true : false
				this.cartList.forEach(v => {
					if (v.id == id) {
						v.status = c
					}
				})
			},
			// 减一个商品
			des(id, index) {
				// console.log(e);
				// return
				if (this.cartList[index].num == 1) {
					uni.showToast({
						title: '不能再减了',
						icon: 'none'
					})
					// this.cartList[index].num = 1
					return
				}
				this.$http({
					url: '/api/cartedit',
					data: {
						id,
						type: 1,
					},
					method: 'POST'
				}).then((res) => {
					this.cartList[index].num--
				})
			},
			// 加一个商品
			add(id, index) {
				this.$http({
					url: '/api/cartedit',
					data: {
						id,
						type: 2,
					},
					method: 'POST'
				}).then((res) => {
					// console.log(res);
					this.cartList[index].num++
					// res.data.list.num ++
				})
			},
			// 删除商品
			del(index) {
				uni.showModal({
					title: '重要提醒',
					content: '是否要删除商品',
					success: async (res) => {
						// console.log(res);
						if (res.confirm) {
							let {
								token
							} = uni.getStorageSync('userInfo');
							let options = {
								url: '/api/cartdelete',
								data: {
									id: this.cartList[index].id
								},
								method: 'POST'
							}
							let result = await this.$http(options)
							if (result.data.code == 200) {
								uni.showModal({
									title: '删除成功',
									icon: 'success'
								})
								this.cartList.splice(index, 1)
							} else if (result.data.code == 403) {
								uni.showModal({
									title: '请重新登录',
									icon: 'error'
								})
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								}, 1500)
							}
						} else {
							uni.showToast({
								title: '网络故障',
								icon: 'error'
							})
						}
					}
				})
			},
			// 跳转订单页面
			goOrder() {
				let carts = this.cartList.filter(item => {
					return item.status == true
				})
				if (carts.length > 0) { // 判断是否有选中的商品
					uni.setStorageSync('carts', {
						carts: carts,
						totalPrice: this.totalPrice,
						totalNum: this.totalNum
					})
					uni.navigateTo({
						url: '/pages/order/order'
					})
				} else {
					uni.showToast({
						title: '至少选择一件商品',
						icon: 'none'
					})
				}
			}
		},
		onLoad() {
			this.$http({
				url: '/api/cartlist',
				data: {
					uid: this.$store.state.userInfo.uid
				}
			}).then((res) => {
				// console.log(res);
				if (res.data.code == 200) {
					this.cartList = res.data.list
					this.cartList ? this.cartList.map(item => item.img = this.$baseUrl + item.img) : ''
					// res.data.list.map((item, index) => {
					// 	item.img = this.$baseUrl + item.img
					// })
				}
				// console.log(this.cartList);
			})
		},
		computed: {
			// 全选
			allCheckbox() {
				// 判断数组里面的status所有结果一样返回true
				return this.cartList.every(v => v.status)
			},
			// 计算总价格
			totalPrice() {
				let total = 0;
				this.cartList.filter(item => {
					if (item.status) {
						total += item.price * item.num
					}
				})
				return total
			},
			// 计算总件数
			totalNum() {
				let total = 0;
				this.cartList.filter(item => {
					if (item.status) {
						total += item.num
					}
				})
				return total
			}
		}
	}
</script>

<style lang="scss">
	// .body {
	// 	background-color: #ccc;
	// }

	.top {
		height: 80rpx;
		background-color: #FF6040;
		color: white;
		line-height: 80rpx;
		display: flex;
		justify-content: space-around;
	}

	.wrap {
		width: 100%;
		height: 80rpx;
		background-color: #FF6040;
		padding: 0 20rpx 0 20rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-between;
	}

	.product {
		height: 350rpx;
		background-color: #ccc;
		display: flex;
		position: relative;
		right: 0;
		top: 0;

		.button {
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			position: absolute;
			right: 10rpx;
			bottom: 10rpx;
		}

		.title {
			width: 380rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.checkbox checkbox {
			width: 80rpx;
			text-align: center;
			line-height: 350rpx;
		}

		image {
			width: 200rpx;
			height: 300rpx;
			text-align: center;
			margin: auto 0;
		}

		.text {
			margin: 50rpx 0 0 30rpx;
			line-height: 70rpx;
		}

		.btn {
			position: absolute;
			top: 200rpx;
			right: 10rpx;
			display: flex;

			view {
				line-height: 60rpx;
			}

			button {
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
			}
		}
	}

	.bot {
		width: 95%;
		height: 100rpx;
		background-color: #ccc;
		padding: 0 20rpx 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 100rpx;

		.close {
			width: 200rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			background-color: #FF6040;
		}
	}

	.product .text[data-v-0f00adf4] {
		margin: 25rpx 0 0 0;
	}
</style>